import React, { Component,Fragment } from 'react';
import {Card,Table, Modal,Button,message} from 'antd'
import './../ui.less'
import axios from './../../../axios/index'
import Utils from './../../../utils/utils'
export default class BaseTable extends Component {
    state = {

    }
    params={
        page:1
    }
    componentWillMount(){
        this.request()
        this.request3()
    }
    request = () => {
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:1
                }
            }
        }).then((res) => {
            if(res.code ===0 ){
                //添加key
                res.result.list.map((item,index) => {
                    return item.key = index
                })
                this.setState({
                    dataSource:res.result.list,
                    dataSource2:res.result.list
                })
            }
        })
        // let baseUrl="https://www.easy-mock.com/mock/5bc55b96869c55589bda3296/mockapi"
        // axios.get(baseUrl+'/table/list').then((res)=>{
        //     console.log(res.status===200,res.data.code===0)
        //     if(res.status===200 && res.data.code === 0){
        //         this.setState({
        //             dataSource:res.data.result.list
        //         })
        //     }
        // })
    }

    //分页请求
    request3 = () => {
        let _this = this;
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then((res) => {
            if(res.code ===0 ){
                //添加key
                res.result.list.map((item,index) => {
                    return item.key = index
                })
                this.setState({
                    dataSource3:res.result.list,
                    selectedRowKeys:[],
                    selectedRows:null,
                    pagination:Utils.pagination(res,(current) => {
                        //current是变化的，到服务端获取
                        _this.params.page = current
                        //重新请求
                        _this.request3()
                    })
                })
            }
        })
    }
    onRowClick = (record,index) => {
        Modal.info({
            title:'选中行信息',
            content:`用户名：${record.userName},用户爱好:${record.interest}`
        })
        
        this.setState({
            //如果是多选的话，就是数组
            selectedRowKeys:[index],
            //一行所有数据
            selectedItem:record
        })
    }
    handleDelete = () => {
        let rows = this.state.selectedCheckRows
        let ids = []
        rows.map((item)=> {
           return ids.push(item.id)
        })
        Modal.confirm({
            title:'删除',
            content:`你确定删除这些数据吗？${ids.join(',')}`,
            onOk:() => {
                this.request()
                this.setState({
                    selectedRowKeys:[],
                    selectedRows:null
                })
                message.info('删除成功')
            }
        })
    }
    render() {
        const dataSource = [
            {
                id:0,
                userName:'jack',
                sex:1,
                state:1,
                interest:1,
                isMarried:1,
                birthday:'2018-08-08',
                address:'北京市海定区奥利匹克公园',
                time:'09:00:00'
            },
            {
                id:2,
                userName:'xiaobing',
                sex:1,
                state:1,
                interest:1,
                isMarried:1,
                birthday:'2018-08-08',
                address:'北京市海定区奥利匹克公园',
                time:'09:00:00'
            },
            {
                id:3,
                userName:'tome',
                sex:1,
                state:1,
                interest:1,
                isMarried:1,
                birthday:'2018-08-08',
                address:'北京市海定区奥利匹克公园',
                time:'09:00:00'
            }
        ]
        //添加key
        dataSource.map((item,index) => {
            return item.key = index
        })
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },
            {
                title:'用户名',
                dataIndex:'userName'
            },
            {
                title:'性别',
                dataIndex:'sex',
                render(sex){
                    return sex ===1 ?'男':'女'
                }
            },
            {
                title:'状态',
                dataIndex:'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'爱好',
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                dataIndex:'address'
            },
            {
                title:'早起时间',
                dataIndex:'time'
            }
        ]
        const rowSelection = {
            type:'radio',
            selectedRowKeys:this.state.selectedRowKeys,
            //selectedRowKeys是一个数组 从0开始[0,1,2],selectedRows也是个数组，表示选中行信息
            //使用onChange的selectedRowKeys才能出radio点击效果
            onChange:(selectedRowKeys,selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows  //用来存储行信息
                })
            }
        }
        const rowCheckSelection = {
            type:'checkbox',
            selectedRowKeys:this.state.selectedCheckRowKeys,
            //selectedRowKeys从0开始,selectedRows是个数组，表示选中行信息
            onChange:(selectedRowKeys,selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedCheckRowKeys:selectedRowKeys,
                    selectedCheckRows:selectedRows,  //用来存储行信息
                })
            }
        }
        return (
            <Fragment>
                <Card title="基础表格" className="card-wrapper">
                    <Table
                        bordered
                        dataSource={dataSource}
                        columns={columns}
                        pagination={false}
                    >
                    </Table>
                </Card>
                <Card title="动态渲染Mock表格" className="card-wrapper">
                    <Table
                        bordered
                        dataSource={this.state.dataSource}
                        columns={columns}
                        pagination={false}
                    >
                    </Table>
                </Card>
                <Card title="Mock表格-单选" className="card-wrapper">
                    <Table
                        bordered
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                //事件集合都写这里
                                onClick:() => {
                                    this.onRowClick(record,index)
                                }
                            }
                        }}
                        dataSource={this.state.dataSource}
                        columns={columns}
                        pagination={false}
                    >
                    </Table>
                </Card>
                <Card title="Mock表格-多选" className="card-wrapper">
                    <Button type="primary" onClick={this.handleDelete} style={{marginBottom:10}}>删除</Button>
                    <Table
                        bordered
                        rowSelection={rowCheckSelection}
                        dataSource={this.state.dataSource2}
                        columns={columns}
                        pagination={false}
                    >
                    </Table>
                </Card>
                <Card title="Mock表格-分页" className="card-wrapper">
                    <Table
                        bordered
                        dataSource={this.state.dataSource3}
                        columns={columns}
                        pagination={this.state.pagination}
                    >
                    </Table>
                </Card>
            </Fragment>
        )
    }
}